<template>
	<view class="content">
		<view class="uniFlex title">
			<img src="../../static/bg/wzf/a1.png" alt="">
			<view>患者订单信息</view>
		</view>
		<view class="uniFlex2 boxes">
			<view>患者姓名：</view>
			<view>{{list.name}}</view>
		</view>
		<view class="uniFlex2 boxes">
			<view>手机号码：</view>
			<view>{{list.phone}}</view>
		</view>
		<view class="uniFlex2 boxes">
			<view>下单时间：</view>
			<view>{{list.add_time}}</view>
		</view>
		<view class="uniFlex2 boxes">
			<view>到期时间：</view>
			<view>{{list.end_time}}</view>
		</view>
		<view class="uniFlex2 boxes">
			<view>收费类型：</view>
			<view v-if="list.pay_type==0">余额</view>
			<view v-else>现金</view>
		</view>
		<view class="uniFlex2 boxes">
			<view>收费金额：</view>
			<view style="color: red;">{{list.price}}</view>
		</view>
		<view class="uniFlex2 boxes">
			<view>订单状态：</view>
			<view v-if="list.status == 0" style="color:#5FB878">未支付</view>
			<view v-else-if="list.status == 1" style="color:#5FB878">已完成</view>
			<view v-else style="color:#5FB878">已取消</view>
		</view>
		<view class="uniFlex2 boxes">
			<view>备注：</view>
			<view>{{list.remark}}</view>
		</view>
		<view class="uniFlex2 boxes">
			<view>执行备注内容：</view>
			<view v-if="list.remark2">{{list.remark2}}</view>
		</view>
		
		<img class="backimg" src="../../static/bg/wzf/a4.png" alt="">
		
		<view class="uniFlex title">
			<img src="../../static/bg/wzf/a2.png" alt="">
			<view>收费项目</view>
		</view>
		
		<view v-for="(item,index) in list2" :key="index" style="border-bottom: 1px solid #FBF8F9;">
			<view class="uniFlex2 boxes">
				<view>治疗名称：</view>
				<view>{{item.title}}</view>
			</view>
			<view class="uniFlex2 boxes">
				<view>购买次数：</view>
				<view>{{item.num}}(赠送：{{item.num2}})</view>
			</view>
			<view class="uniFlex2 boxes">
				<view>价格：</view>
				<view>{{item.price2}}</view>
			</view>
			<view class="uniFlex2 boxes">
				<view>相关信息：</view>
				<view>{{item.items}}</view>
			</view>
		</view>
		<img v-if="show" class="backimg" src="../../static/bg/wzf/a4.png" alt="">
		
		<view class="uniFlex title" v-if="show">
			<img src="../../static/bg/wzf/a3.png" alt="">
			<view>核验信息</view>
		</view>
		<view v-if="show" v-for="(item,index) in list3" :key="index" style="border-bottom: 1px solid #FBF8F9;">
			<view class="uniFlex2 boxes">
				<view>治疗名称：</view>
				<view>{{item.title}}</view>
			</view>
			<view class="uniFlex2 boxes">
				<view>执行次数：</view>
				<view>{{item.num}}</view>
			</view>
			<view class="uniFlex2 boxes">
				<view>执行人：</view>
				<view>{{item.name}}</view>
			</view>
			<view class="uniFlex2 boxes">
				<view>时间：</view>
				<view>{{item.add_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		wzfread
	} from '@/request/api.js'
	export default {
		data() {
			return {
				id:'',
				list: {},
				list2: [],
				list3: [],
				show:false
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getDetail(option.id);
		},
		methods: {
			// 列表
			getDetail(id) {
				wzfread({
					id:id
				}).then(res => {
					this.list = res.data.data;
					this.list2 = res.data.item;
					if(res.data.item2.length > 0){
						this.show = true;
						this.list3 = res.data.item2;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 35upx;
		font-size: 28upx;
		box-sizing: border-box;
		
		.title{
			padding: 20upx 0;
			border-bottom: 1px solid #FBF8F9;
			font-weight: bold;
			
			img{
				width: 47upx;
				height: 47upx;
				margin-right: 16upx;
			}
		}
		
		.boxes{
			padding: 20upx 0;
			view:first-child{
				width: 220upx;
			}
			view:last-child{
				flex: 1;
			}
		}
		
		.backimg{
			width: 100%;
			height: 24upx;
		}
	}
</style>
